<template>
  <el-dialog
    v-model="isVisble"
    title="选择模板"
    width="980px"
    custom-class="templateDialog-container"
    @closed="closed"
  >
    <div class="template-header">
      <el-form>
        <el-row>
          <el-col :span="8">
            <el-form-item label="模板类型：" label-width="120px">
              <el-select v-model="form.type" @change="loadData">
                <el-option
                  v-for="(item, index) in templateTypes"
                  :key="'templateTypes_' + index"
                  :value="item.value"
                  :label="item.label"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="模板内容筛选：" label-width="120px">
              <el-input v-model="form.name" @input="loadData"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <!-- <h3>模板</h3> -->
    <div class="template-body">
      <div class="treatment-tpls" style="margin-left: 0">
        <h3>模板</h3>
        <div
          v-for="item in items"
          class="treatment-tpl-item"
          @click.stop="setChecked('item', item)"
          :class="{ checked: itemChecks.includes(item.id) }"
          :key="'treatment_tpls_' + item.id"
        >
          <el-tag
            type="success"
            size="small"
            style="position: absolute; top: 8px; right: 8px"
          >
            {{ item.type }}
          </el-tag>
          <div class="tpl-content">
            <div>{{ item.templateName }}</div>
          </div>
          <div class="tpl-desc">{{ item.title }}</div>
        </div>
        <div v-if="!items.length" class="none-data">数据为空</div>
      </div>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="onSubmit">确 定</el-button>
        <el-button @click="isVisble = false">取 消</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script>
  import emr from '@/hooks/emr'
  import { reactive, toRefs } from '@vue/reactivity'
  import { seachTemplateList } from '@/api/modules/prescription'
  export default {
    name: 'prescriptionTemplateDialog',
    emits: ['selResult'],
    setup(props, context) {
      const d = reactive({
        isVisble: false,
        items: [],
        form: { type: '私有' },
        itemChecks: [],
      })
      const initData = function () {
        d.isVisble = true
        loadData()
      }

      const closed = function () {
        d.items = []
        d.itemChecks = []
      }
      const loadData = async function () {
        const res = await seachTemplateList({ ...d.form })
        d.items = res.data.map((item, index) => {
          item.id = index
          return item
        })
        console.log(' d.items =' + JSON.stringify(d.items))
      }

      const setChecked = function (type, item) {
        if (d.itemChecks.includes(item.id)) {
          d.itemChecks.splice(item.id, 1)
        } else {
          d.itemChecks.push(item.id)
        }
      }
      const onSubmit = function () {
        d.isVisble = false
        const checkList = d.items
          .filter((item) => {
            return d.itemChecks.includes(item.id)
          })
          .reduce((pre, last) => {
            if (!pre) return last.detailedWebs
            return pre.detailedWebs.concat(last.detailedWebs)
          }, false)
        console.log('checkList =' + JSON.stringify(checkList))
        context.emit('selResult', checkList)
      }
      return {
        initData,
        ...toRefs(d),
        setChecked,
        ...emr(),
        loadData,
        closed,
        onSubmit,
      }
    },
  }
</script>
<style lang="scss" scoped>
  .templateDialog-container {
    &.el-dialog {
      margin-top: 5vh !important;
    }
    &.el-dialog .el-row {
      height: 44px;
    }
    .template-header {
      white-space: nowrap;
      padding: 6px 0px 12px;
      font-size: 16px;
      background-color: #eee;
      .template-cell {
        display: flex;
        align-items: center;
        margin-right: 10px;
        .el-select {
          background-color: #eee;
        }
      }
    }
    .template-body {
      margin-top: 12px;
      height: calc(100vh - 420px);
      overflow: hidden;
      .treatment-items {
        float: left;
        width: 250px;
        left: 0;
        top: 0;
        height: 100%;
        padding: 6px 12px;
        box-sizing: border-box;
        overflow: auto;
        border: 1px dashed #eee;
        border-radius: 2px;

        .treatment-item-item {
          padding: 8px;
          line-height: 2;
          border-radius: 2px;
          position: relative;
          // padding-left: calc(4rem + 4px);
          text-align: center;
          background-color: #fff;
          border: 1px dashed #f2f2f2;
          margin: 6px 0;
          font-size: 14px;
          display: -webkit-box;
          overflow: hidden;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          text-overflow: ellipsis;
          max-height: 3.4rem;
          color: #666;

          &.checked {
            border: 1px dashed #c8dbf7;
            color: #0066ad;

            .treatment-item-checker {
              position: absolute;
              top: 0;
              right: 0;
              height: 0px;
            }
          }

          &.active {
            border: 1px solid #c8dbf7;
            color: #0066ad;
            font-weight: bold;
          }

          .treatment-item-checker {
            position: absolute;
            top: 0;
            right: 0;
            height: 0px;
            // top: 0;
            // left: 0;
            // display: flex;
            // align-items: center;
            // justify-content: center;
            // height: 100%;
            // width: 4rem;
            // color: primary;
            // background-color: #c8dbf7;
            // font-size: 12px;
            // border: 1px dashed #c8dbf7;
            // cursor: pointer;
          }
        }
      }

      h3 {
        margin: 4px 8px;
      }

      .treatment-tpls {
        margin-left: 250px;
        padding: 6px 12px;
        height: 100%;
        overflow: auto;

        .treatment-tpl-item {
          padding: 12px;
          border-radius: 4px;
          background-color: #eee;
          margin: 0 0 0.5rem 0;
          color: #333;
          position: relative;
          &.checked {
            background-color: #c8dbf7;
            color: #fff;

            .tpl-desc,
            .tpl-content {
              color: #0066ad;
            }
          }
        }

        .tpl-desc {
          color: #999;
          font-size: 14px;
          margin-top: 1rem;
        }
      }
      // .cell-item {
      //   padding: 12px;
      //   border-radius: 4px;
      //   background-color: #eee;
      //   margin: 0 0 0.5rem;
      //   color: #333;
      //   &.checked {
      //     background-color: #c8dbf7;
      //     color: #0066ad;
      //   }
      // }
    }
  }
</style>
